<template>
  <user-search ref="searchRef" style="margin-bottom: 12px" @search="reload" />
  <!-- 表格 -->
  <ele-pro-table
    ref="tableRef"
    row-key="userId"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    v-model:selections="selections"
    highlight-current-row
    :export-config="{ fileName: '用户数据' }"
    :footer-style="{ paddingBottom: '16px' }"
    :tableStyle="{
      backgroundColor: '#fff',
      borderRadius: '8px'
    }"
    cache-key="systemUserTable"
  >
    <template #toolbar>
      <el-button
        class="ele-btn-icon"
        :icon="DownloadOutlined"
        v-permission="'system:dict:export'"
        @click="exportData"
      >
        导出
      </el-button>
    </template>

    <!-- 插槽写法 -->
    <template #proName="{ row, $index }">
      {{ row.proName }}
    </template>

    <template #status="{ row, $index }">
      <el-switch
        v-model="value3"
        inline-prompt
        active-text="正常"
        inactive-text="停用"
      />
    </template>

    <template #objInfo="{ row, $index }">
      <span class="float-left">
        {{ row.object }}
      </span>
      <span class="float-left">
        {{ row.objectCode }}
      </span>
    </template>

    <!-- 操作列 -->
    <template #action="{ row, $index }">
      <el-space>
        <el-link
          type="primary"
          :underline="false"
          @click="openEdit(row)"
          icon="View"
          >详情
        </el-link>
      </el-space>
    </template>
  </ele-pro-table>
  <!-- 编辑弹窗 -->
  <user-edit
    :data="current"
    v-model="showEdit"
    :dept-id="deptId"
    @done="reload"
  />
</template>

<script setup>
  import { ref, watch, computed } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { DownloadOutlined } from '@/components/icons';
  import UserSearch from './user-search.vue';
  import UserEdit from './user-edit.vue';

  const props = defineProps({
    /** 部门id */
    deptId: Number
  });

  /** 搜索栏实例 */
  const searchRef = ref(null);

  /** 表格实例 */
  const tableRef = ref(null);

  // 暂时放在这里

  const value3 = ref(true);
  /** 表格列配置 */
  const columns = computed(() => {
    return [
      {
        type: 'selection',
        columnKey: 'selection',
        width: 48,
        align: 'center',
        fixed: 'left'
      },
      {
        type: 'index',
        columnKey: 'index',
        label: '序号',
        width: 60,
        align: 'center'
        // fixed: 'left'
      },
      {
        prop: 'proName',
        label: '巡检项名称',
        align: 'left',
        minWidth: 220,
        slot: 'proName'
      },
      {
        prop: 'proAdd',
        label: '巡检点名称',
        align: 'center',
        width: 110
      },
      {
        prop: 'optionObj',
        label: '操作对象',
        align: 'center',
        minWidth: 100
      },
      {
        prop: 'objInfo',
        label: '对象信息',
        align: 'center',
        minWidth: 60,
        slot: 'objInfo'
      },
      {
        prop: 'remark',
        label: '操作描述',
        align: 'left',
        minWidth: 110
      },
      {
        prop: 'ationTime',
        label: '操作时间',
        align: 'center',
        width: 180
      },
      {
        columnKey: 'action',
        label: '操作',
        width: 90,
        align: 'center',
        slot: 'action',
        hideInPrint: true,
        hideInExport: true
      }
    ];
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 表格数据源 */
  const datasource = () => {
    let data = new Promise((resolve) => {
      resolve([
        {
          id: 0,
          proName: 'XXXX名称',
          proAdd: '描述内容',
          optionObj: '机器人',
          objInfo: '',
          remark: '正常',
          ationTime: '2023-02-07 10:58:18',
          object: '机器人',
          objectCode: 'S10086'
        },
        {
          id: 1,
          proName: 'XXXX名称',
          proAdd: '描述内容',
          optionObj: '摄像头',
          objInfo: '',
          remark: '正常',
          ationTime: '2023-03-07 10:58:18',
          object: '摄像头',
          objectCode: 'S10086'
        },
        {
          id: 2,
          proName: 'XXXX名称',
          proAdd: '描述内容',
          optionObj: '无人机',
          objInfo: '',
          remark: '正常',
          ationTime: '2023-06-07 12:58:18',
          object: '无人机',
          objectCode: 'S10086'
        }
      ]);
    });
    return data;
  };

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row) => {
    current.value = row ?? null;
    showEdit.value = true;
  };
  /** 导出数据 */
  const exportData = () => {
    const loading = EleMessage.loading({
      message: '请求中..',
      plain: true
    });
    tableRef.value?.fetch?.(({ where, orders, filters }) => {
      // exportUsers({ ...where, ...orders, ...filters })
      //   .then(() => {
      //     loading.close();
      //   })
      //   .catch((e) => {
      //     loading.close();
      //     EleMessage.error(e.message);
      //   });
    });
  };

  // 监听机构 id 变化
  watch(
    () => props.deptId,
    () => {
      searchRef.value?.resetFields?.();
      reload({});
    }
  );
</script>

<style lang="scss"></style>
